<template>
  <div>
    <div class="curriculum-list flex-h">
      <div class="curriculum" v-for="item in videoLists" :key="item.id" @click="goCourse(item)">
        <div class="img-box">
          <img class="pics" :src="item.pics[0]" alt />
          <img class="state" v-if="item.sign" :src="item.sign === '新' ? imgXin : item.sina === '热' ? imgRe : imgJian" alt />
          <!-- <img v-show="item.commodityType === 1" class="start" src="~@/static/images/startbtn.png" alt />
          <img v-show="item.isVip" class="vips" src="~@/static/icon_vip.png" alt /> -->
            <img v-show="item.commodityType === 1" class="start" style="background:red" alt />
          <img v-show="item.isVip" class="vips" style="background:yellow"  alt />
        </div>
        <span class="title" v-if="item.commodityName">{{ item.commodityName }}</span>
        <span class="mark" v-if="item.title">{{ item.title }}</span>
      </div>
    </div>
  </div>
</template>

<script>
import ls from 'store2'
export default {
  components: {},
  props: {
    videoLists: Array
  },
  data() {
    return {
      showBuyVipModle: false,
      serverName: '',
    //   imgJian: require('../../../static/lesson_icon_tuijian.png'),
    //   imgXin: require('../../../static/lesson_icon_xin.png'),
    //   imgRe: require('../../../static/lesson_icon_remen.png')
      imgJian:'',
      imgXin: '',
      imgRe:''
    }
  },
  created() {
    if (this.commonJs.GetUrlParam('mini_token')) {
      ls.set('tokensyxk', this.commonJs.GetUrlParam('mini_token'))
    }
  },
  mounted() {
    // this.$getVip()
  },
  methods: {
    goCourse(item) {
      let id = item.id
      let professorId = item.professorId
      let professorName = item.professorName
      let type = item.commodityType
      let needvip = item.isVip
      let isVipstrs = sessionStorage.getItem('isVipStr')
      if (item.isTopic) {
        this.commonJs.gopush('../curriculum/detail?id=' + id)
        return
      }
      if ((this.commonJs.GetUrlParam('share') || this.commonJs.GetUrlParam('shareExpert')) && needvip) {
        this.$emit('openSharePopup')
        return false
      }
      let routeUri
      if (this.commonJs.GetUrlParam('share')) {
        routeUri = '&share=true'
      } else {
        routeUri = ''
      }
      let needvipShare
      if (needvip) {
        needvipShare = true
      } else {
        needvipShare = false
      }
      this.$store.commit('hasvipShare', needvipShare)
      if (type === 1) {
        this.$store.commit('changeexpertId', professorId)
        this.$store.commit('changeexpertName', professorName)
        if (this.commonJs.GetUrlParam('mini_token')) {
          this.commonJs.gopush('../curriculum/videoCourse?id=' + id + '&professorId=' + professorId + '&mini_token=' + this.commonJs.GetUrlParam('mini_token') + routeUri)
        } else {
          this.commonJs.gopush('../curriculum/videoCourse?id=' + id + '&professorId=' + professorId + routeUri)
        }
      } else if (type === 2) {
        if (this.commonJs.GetUrlParam('mini_token')) {
          this.$router.push({
            path: '../curriculum/graphicCourse?' + routeUri,
            query: {
              type: id,
              mini_token: this.commonJs.GetUrlParam('mini_token')
            }
          })
        } else {
          this.commonJs.gopush('../curriculum/graphicCourse?' + routeUri, id)
        }
      } else {
        this.commonJs.gopush('../curriculum/detail?id=' + id)
      }
    }
  }
}
</script>

<style lang="less" scoped>
.curriculum-list {
  width: 100%;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: stretch;
  .curriculum {
    width: 3.3rem;
    height: auto;
    margin-bottom: 0.4rem;
    .img-box {
      width: 100%;
      height: 2.5rem;
      border-radius: 0.08rem;
      position: relative;
      .pics {
        width: 100%;
        height: 2.5rem;
        display: block;
        // background: url('~@/static/header.png') no-repeat;
        background: yellow;
        background-size: 100% 100%;
        border-radius: 0.1rem;
      }
      .state {
        position: absolute;
        width: 0.68rem;
        height: 0.68rem;
        left: 0;
        top: 0;
      }
      .start {
        position: absolute;
        width: 0.6rem;
        height: 0.6rem;
        right: 0.16rem;
        bottom: 0.16rem;
      }
      .vips {
        position: absolute;
        width: 0.7rem;
        height: 0.36rem;
        left: 0;
        bottom: 0;
      }
    }
    .title {
      display: block;
      font-size: 0.28rem;
      font-family: 'PingFangSC-Semibold', PingFangSC;
      font-weight: 600;
      color: rgba(34, 34, 34, 1);
      line-height: 0.4rem;
      height: 0.8rem;
      text-overflow: -o-ellipsis-lastline;
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      line-clamp: 2;
      -webkit-box-orient: vertical;
    }
    .mark {
      display: block;
      font-size: 0.22rem;
      font-family: 'PingFangSC-Regular', PingFangSC;
      font-weight: 400;
      color: rgba(153, 153, 153, 1);
      line-height: 0.4rem;
      margin-top: 0.2rem;
    }
  }
}
</style>
